<template>
  <div id="revise" v-show="panelShow">
    <!-- 修改手机号 页面-->
    <div class="revise_message">
      <input class="revise_message_content"
      :placeholder="`已绑定的手机号                 ${oldTelephone}`" disabled="true"/>
    </div>
    <div class="revise_message">
      <input class="revise_message_content"
      v-model='phoneNumber' placeholder="请输入新的手机号"/>
      <img
        class="revise_message_delete" src="./assets/ic_delete.png"
        @click="phoneNumber = ''"
      />
    </div>
    <div class="login_message">
					<input
						class="login_message_content"
						v-model='code' placeholder="输入验证码"
						@blur="checkoutCode()"
					/>
					<a @click="getCode()" class="login_message_code" :disabled="!show">
						<span v-show="show">发送验证码</span>
						<span v-show="!show" class="count">{{count}} s</span>
					</a>
				</div>
			
    <div class="revise_button"  @click="updateMessage()">
      保存
    </div>
  </div>
</template>
<script>
import '../../css/layout.css'
import '@/utils/rem.js';
import MyFooter from '../../components/footer/footer';
import User from '_common/services/user.js'
import wxLogin from '_common/wxLogin.js'
const TIME_COUNT1 = 60;
export default {
  	name: 'user_revise',
  	data() {
  		return {
        phoneNumber: '',
        show: true,
        count: '',
        timer: null,
        code: '',
  		}
    },
    props: {
      panelShow: {
        type: Boolean
      },
      oldTelephone: {
        type: String,
      }
    },
  	computed: {
  	},
  	methods: {
      checkoutTel() {
			if (this.phoneNumber === '') {
				this.errorMessage = '手机号不能为空';
				this.errorTipVisible = true;
				return false;
			} else if (!this.$validate.tel(this.phoneNumber)) {
				this.phoneNumber = '';
				this.errorMessage = '手机号格式错误';
				this.errorTipVisible = true;
				return false;
			}
			return true;
		},
      checkoutCode() {
        if (this.code === '') {
          this.errorMessage = '验证码不能为空';
          this.errorTipVisible = true;
          return false;
        } else if (!this.$validate.yzm(this.code)) {
          this.code = ''
          this.errorMessage = '验证码格式错误';
          this.errorTipVisible = true;
          return false;
        }
        return true;
      },
      getCode(){
        if (!this.checkoutTel()) return false;
        if (!this.timer) {
          User.requestCode({
            type: 3,
            phoneNumber: this.phoneNumber
          }).then( data => {
            if (data && data.mes) {
              this.$alertTip({
                message: data.mes,
                time: 2000
              });
              return false;
            }
          });
          this.count = TIME_COUNT1;
          this.show = false;
                  this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT1) {
                      this.count--;
                    } else {
                      this.show = true;
                      clearInterval(this.timer);
                      this.timer = null;
                    }
                  }, 1000)
              }
      },
      updateMessage() {
        User.updatePhoneNumber({
          phoneNumber: this.phoneNumber,
          verificationCode: this.code,
        }).then(res => {
          this.$alertTip(res.msg);
            if(res.data.code === 0) {
              console.log('保存手机号修改的信息～', this.phoneNumber);
              location.reload();
              // 下面的语句配合开头写的 .sync 就会更新父组件中的 panelShow 变量
              this.$emit('update:panelShow', false);
            }
        });
      }
    },
    async beforeMount() {
      await wxLogin()
    },
    components: {
    }
}  
</script>

<style lang="less" scoped>
html {
  height: 100%;
  body {
    height: 100%;
    background-color: #f8f8f8;
    #revise {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        // justify-content: center;
        background-color: #f8f8f8;
        position: absolute;
        left: 0;
        top:0;
        z-index: 10;
      .revise_message {
        margin-top: 30px;
        border-bottom: 1px solid #eaeaea;
        width: 100%;
        height: 88px;
        box-sizing: border-box;
        padding: 0 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        .revise_message_content {
          background-color: white;
          outline:none;  
          border:0px;
          width: 70%;
        }
        .revise_message_delete {
          width: 32px;
          height: 32px;
        }
      }
      .revise_button {
        width: 680px;
        height: 88px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 36px;
        color: white;
        background-color: #f3a13a;
      }
      .login_message {
			border-bottom: 1px solid #eaeaea;
			width: 100%;
			height: 88px;
			box-sizing: border-box;
			padding: 0 32px;
			display: flex;
			justify-content: space-between;
			align-items: center;
      background-color: white;
      margin-bottom: 90px;
			.login_message_content {
				outline:none;  
				border:0px;
				width: 70%;
			}
			.login_message_code {
				color: #f3a13a;
			}
		}
    }
  }
}

</style>